<template>
	<view class="page-body" :class="[app.setCStyle()]">
		<view class="top_title" :style="{'background-image':'url('+top_bg+')'}">
			<!-- #ifndef H5 -->
			<view class="window-top mb40"></view>
			<!-- #endif -->
			<view class="fs34 text-center p20">个人中心</view>
		</view>
		<view class="top_box" :style="{'background-image':'url('+top_bg+')'}">
			<view class="user_info relative smll">
				<view class="headimgurl " @click="app.goPage('editInfo')">
					<image  :src="headimgurl">
						<u-loading slot="loading"></u-loading>
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</image>
				</view>
				<view class="flex_bd ml20">
					<view class="smll">
						<text class="fs32 nickname">{{userInfo.nick_name}}</text>
					</view>
					<view class="smll mt10">
						<view v-if="setting.user_center_show_role == 1" class="sf-label mr10">
							{{userInfo.role.role_name}}
						</view>
			<!-- 			<view v-if="userInfo.level_id > 0" class="sf-label mr10">
							{{userInfo.level_name}}
						</view> -->
						<view v-if="userInfo.isRegion > 0" class="sf-label mr10">
							{{userInfo.regionName}}
						</view>
						
					</view>	
					<view class="smll mt10 fs22">
						<view class="mr30">UID：{{userInfo.user_id}}</view>
						<view>绑定号码：{{userInfo.mobile}}</view>
					</view>
				</view>
				<view class="icon_set smll">
					<view class="mr30" @click="app.goPage('/pages/public/message/index')">
						<u-icon name="/static/public/images/icon_notice.png" size="48" @click=""></u-icon>
						<view class="set_text">通知</view>
					</view>
					<view>
						<u-icon name="/static/public/images/icon_set.png" size="48" @click="app.goPage('set')"></u-icon>
						<view class="set_text">设置</view>
					</view>

				</view>
			</view>
			<view class="card_box fs40">
				<u-grid :col="3"  :border="false">
					<u-grid-item bg-color="none" class="p0" @click="app.goPage('/pages/member/wallet/index')">
						<view class="ff">{{userInfo.account.balance_money}}</view>
						<view class="fs26 color-99">帐户积分</view>
					</u-grid-item>
<!-- 					<u-grid-item bg-color="none" class="p0" @click="app.goPage('/pages/member/wallet/index')">
						<view class="ff">{{userInfo.account.integral_money}}</view>
						<view class="fs26 color-99">购物分</view>
					</u-grid-item> -->
					<u-grid-item bg-color="none" class="p0" @click="app.goPage('/pages/member/team/index')">
						<view class="ff">{{teamCount.allNum}}</view>
						<view class="fs26 color-99">团队</view>
					</u-grid-item>
					<u-grid-item bg-color="none" class="p0" @click="app.goPage('/pages/member/team/index')">
						<view class="ff">{{teamCount.underNum}}</view>
						<view class="fs26 color-99">直推</view>
					</u-grid-item>
					
				</u-grid>
			</view>
		</view>
		<view class="pbox">
			<view class="menu_box mt20">
				<view class="p20">
					<text class="fs28 font-w600">我的订单</text>
					<view class="fs24 fr color-99 font-wn" @click="app.goPage('/pages/shop/order/list?state=0')">
						查看全部<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-grid :col="setting.shop_after_sale_limit > 0 ? 5 : 4" class="fs28" :border="false">
					<u-grid-item @click="app.goPage('/pages/shop/order/list?state=1')">
						<u-badge :count="orderStats.wait_pay_num" :offset="[20, 20]"></u-badge>
						<u-icon :name="baseUrl+setting.user_center_oicon_wait_pay" :size="48"></u-icon>
						<view class="mt10 fs26 color-99">待付款</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pages/shop/order/list?state=2')">
						<u-badge :count="orderStats.wait_shipping_num" :offset="[20, 20]"></u-badge>
						<u-icon :name="baseUrl+setting.user_center_oicon_wait_shipping" :size="48"></u-icon>
						<view class="mt10 fs26 color-99">待发货</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pages/shop/order/list?state=3')">
						<u-badge :count="orderStats.wait_sign_num" :offset="[20, 20]"></u-badge>
						<u-icon :name="baseUrl+setting.user_center_oicon_wait_sign" :size="48"></u-icon>
						<view class="mt10 fs26 color-99">待收货</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pages/shop/order/list?state=4')">
						<u-icon :name="baseUrl+setting.user_center_oicon_sign" :size="48"></u-icon>
						<view class="mt10 fs26 color-99">已完成</view>
					</u-grid-item>
					<u-grid-item v-if="setting.shop_after_sale_limit > 0" @click="app.goPage('/pages/shop/aftersale/index')">
						<u-icon :name="baseUrl+setting.user_center_oicon_after_sale" :size="48"></u-icon>
						<view class="mt10 fs26 color-99">退货/售后</view>
					</u-grid-item>

				</u-grid>
			</view>
			<view class="menu_box mt20">
				<view class="p20 b-tottom">
					<text class="fs30 font-w700">我的工具</text>
				</view>
				<u-grid v-if="setting.user_center_nav_tpl == 0" :col="4" class="fs28" :border="false">
					<u-grid-item v-for="(res, index) in navMenu" :key="index" class="mt10 mb10" @click="app.goPage(res.url,res.bind_type=='kflink'?'web':false)">
						<u-icon :name="baseUrl+res.imgurl" :size="48"></u-icon>
						<view class="mt10 fs24">{{res.title}}</view>	
					</u-grid-item>
				</u-grid>
				<view v-if="setting.user_center_nav_tpl == 1" v-for="(res, index) in navMenu" :key="index">
					<view class="list-cell b-b mt20" @click="app.goPage(res.url,res.bind_type=='kflink'?'web':false)" hover-class="cell-hover" :hover-stay-time="50">
						<u-icon :name="baseUrl+res.imgurl" :size="48" class="mr20"></u-icon>
						<view class="cell-tit fs28"> {{res.title}}</view>
						<view class="cell-more">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>

		</view>
		<tabbar :_current="4" :getCartNum="0"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/pages/shop/tabbar';
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				baseUrl: this.config.baseUrl,
				setting: {},
				top_bg: '',
				userInfo: {
					role: {},
					account: {}
				},
				orderStats: {},
				collectNum: 0,
				headimgurl: '/static/public/images/headimgurl.jpg',
				navMenu: {},
				teamCount: {}
			}
		},
		onLoad(options) {

		},
		onShow() {
			this.app.isLogin(this); //强制登陆
			this.setting = uni.getStorageSync("setting");
			if (this.setting.user_center_top_bg != '') {
				this.top_bg = this.config.baseUrl + this.setting.user_center_top_bg;
			}
			let that = this;
			if (this.setting.user_center_top_nav_bgc != '') {
				setTimeout(function() {
					uni.setNavigationBarColor({
						backgroundColor: that.setting.user_center_top_nav_bgc
					});
				}, 500);
			}
			this.getCenterInfo();
		},
		methods: {
			getCenterInfo() {
				//获取会员中心信息
				this.$u.post('member/api.center/getCenterInfo').then(res => {
					this.userInfo = res.data.userInfo;
					this.orderStats = res.data.orderStats;
					this.collectNum = res.data.collectNum;
					this.navMenu = res.data.navMenu;
					this.teamCount = res.data.teamCount;
					if (this.userInfo.headimgurl != '') {
						this.headimgurl = this.config.baseUrl + this.userInfo.headimgurl;
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.u-badge{
		z-index: 999;
	}
	.top_title {
		position: relative;
		top: 0;
		width: 100%;
		z-index: 99;
		background-size: 100%;
		background-repeat: no-repeat;
		/* #ifdef H5 */
		height: 90rpx;
		background-position: 0rpx -130rpx;
		/* #endif */
		/* #ifndef H5*/
		height: calc(90rpx + var(--status-bar-height) + var(--status-bar-height));
		/* #endif */
		color: #FFFFFF;
	}

	.top_box {
		height: 360rpx;
		background-repeat: no-repeat;
		background-size: 100%;
		/* #ifdef H5 */
		background-position: 0rpx -220rpx;
		/* #endif */
		/* #ifndef H5*/
		background-position: 0rpx calc(-90rpx - var(--status-bar-height) - var(--status-bar-height));
		/* #endif */
		color: #FFFFFF;

		.user_info {
			height: 200rpx;
		}

		.headimgurl {
			margin-left: 20rpx;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
			border: 3rpx solid #FFFFFF;
			background-color: #FFFFFF;
			
			image{
				border-radius: 50%;
				width: 100%;
				height: 100%;
			}
		}

		.headimgEdit {
			position: absolute;
			top: 100rpx;
			left: 70rpx;
		}

		.icon_set {
			position: absolute;
			top: 10rpx;
			right: 20rpx;

			.set_text {
				font-size: 22rpx;
				color: #FFFFFF;
				margin-top: -10rpx;
			}
		}
	}

	.card_box {
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx;
		width: auto;
		color: $font-color-dark;
		padding: 30rpx 0;
	}

	.nickname {
		min-width: 100rpx;
		max-width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		-webkit-box-orient: vertical;
	}

	.sf-label {
		min-width: 90rpx;
		line-height: 30rpx;
		font-size: 22rpx;
		color: #ffffff;
		border-radius: 4rpx;
		border: solid 1rpx #ffffff;
		padding: 2rpx 10rpx;
		display: inline-block;
		text-align: center;
	}

	.menu_box {
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}
</style>
